<template>
  <div class="wrap">
    <ul class="mes-list-wrap">
      <li class="mes-list-item flex flex-align-center"
          v-for="item in list"
          @click="go_details(item)">
        <img :src="item.imgUrl" class="mes-list-img">
        <div class="mes-list-content mui-ellipsis">
          <div class="mlist-title mui-ellipsis">
            {{item.title}}
          </div>
          <div class="mlist-time">
            {{item.createTime}}
          </div>
        </div>
        <div class="mes-list-state red"
        v-if="item.s_type == '待办'">
        <i class="iconfont icon-dengdai" style="font-size: 15px"></i>
        {{item.s_type}}
        </div>
        <div class="mes-list-state green"
                           v-if="item.s_type == '已办'">
          <i class="iconfont icon-CheckedCircleIcon" style="font-size: 15px"></i>
        {{item.s_type}}
      </div>
        <div class="mes-list-state gray"
        v-if="item.s_type == '办结'">
        {{item.s_type}}
        </div>
      </li>
    </ul>
    <noData v-if="list.length == 0"></noData>
  </div>
</template>

<script type="es6">
  import noData from "../noData"

  export default {
    props: {
      list: {
        default: []
      }
    },
    components: {
      noData
    },
    methods: {
      go_details(i) {
        this.$emit("dt",i);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../base/variable.styl"
  @import "../../base/icon.css"
  .wrap {
    position relative;
    height 100%
    overflow-y scroll
  }

  .mes-list-wrap {
    width: 100%;
  }

  .mes-list-item {
    padding: 14px 12px;
    border-radius: 4px;
    background-color: #fff;
    margin: 10px;
    display flex
    align-items center
    .red {
      color $color-red
    }
    .green {
      color $color-green
    }
    .gray {
      color $color-gray
    }
  }

  .mes-list-content {
    flex: 1;
  }

  .mes-list-img {
    width: 44px;
    height: 44px;
    margin-right: 10px;
  }

  .mlist-title {
    font-size: 16px;
  }

  .mlist-name, .mlist-time {
    font-size: 12px;
    margin-top: 4px;
  }

  .mlist-name {
    /*color: #2196f3;*/
  }

  .mlist-time {
    color: #999;
  }

  .mes-list-state{
    font-size 14px
  }

</style>

